import { useState } from 'react';
import { Link } from 'react-router-dom';
import { BarChart2Icon, ArrowRightIcon } from 'lucide-react';
const LabData = () => {
  const [activeTab, setActiveTab] = useState('cpu');
  const tabs = [{
    id: 'cpu',
    label: 'CPU Performance'
  }, {
    id: 'gpu',
    label: 'GPU Benchmarks'
  }, {
    id: 'display',
    label: 'Display Analysis'
  }];
  return <div className="card p-6">
      <div className="flex items-center mb-6">
        <BarChart2Icon className="text-[#4361ee] mr-3" size={24} />
        <h2 className="text-xl font-bold font-display">
          Lab Data Preview
        </h2>
      </div>
      <div className="flex mb-6 overflow-x-auto">
        {tabs.map(tab => <button key={tab.id} className={`px-4 py-2 text-sm font-medium whitespace-nowrap ${activeTab === tab.id ? 'text-white border-b-2 border-[#4361ee]' : 'text-[#8a8f98] hover:text-white'}`} onClick={() => setActiveTab(tab.id)}>
            {tab.label}
          </button>)}
      </div>
      {activeTab === 'cpu' && <div>
          <div className="mb-8">
            <h3 className="text-lg font-medium mb-4">
              Multi-Core Performance (Higher is better)
            </h3>
            <div className="space-y-4">
              {[{
            name: 'Apple M2 Pro',
            score: 15000,
            color: '#4361ee'
          }, {
            name: 'AMD Ryzen 9 7950X',
            score: 14200,
            color: '#ff0000'
          }, {
            name: 'Intel Core i9-13900K',
            score: 13800,
            color: '#0096ff'
          }, {
            name: 'Apple M1 Pro',
            score: 12400,
            color: '#8a8f98'
          }].map(item => <div key={item.name} className="space-y-1">
                  <div className="flex justify-between text-sm">
                    <span>{item.name}</span>
                    <span className="font-medium">{item.score}</span>
                  </div>
                  <div className="w-full bg-[#151518] rounded-full h-2">
                    <div className="h-2 rounded-full" style={{
                width: `${item.score / 15000 * 100}%`,
                backgroundColor: item.color
              }}></div>
                  </div>
                </div>)}
            </div>
          </div>
          <Link to="/review/macbook-m2-pro" className="flex items-center text-[#4361ee] hover:text-[#06d6a0] transition-colors">
            <span className="mr-2 text-sm">
              View full M2 Pro MacBook review
            </span>
            <ArrowRightIcon size={16} />
          </Link>
        </div>}
      {activeTab === 'gpu' && <div>
          <div className="mb-8">
            <h3 className="text-lg font-medium mb-4">
              Gaming Performance @ 4K (FPS)
            </h3>
            <div className="space-y-4">
              {[{
            name: 'RTX 4090',
            score: 142,
            color: '#76b900'
          }, {
            name: 'RTX 4080',
            score: 118,
            color: '#76b900'
          }, {
            name: 'RX 7900 XTX',
            score: 110,
            color: '#ff0000'
          }, {
            name: 'RTX 3090 Ti',
            score: 98,
            color: '#8a8f98'
          }].map(item => <div key={item.name} className="space-y-1">
                  <div className="flex justify-between text-sm">
                    <span>{item.name}</span>
                    <span className="font-medium">{item.score}</span>
                  </div>
                  <div className="w-full bg-[#151518] rounded-full h-2">
                    <div className="h-2 rounded-full" style={{
                width: `${item.score / 142 * 100}%`,
                backgroundColor: item.color
              }}></div>
                  </div>
                </div>)}
            </div>
          </div>
          <Link to="/review/rtx-4090" className="flex items-center text-[#4361ee] hover:text-[#06d6a0] transition-colors">
            <span className="mr-2 text-sm">View full RTX 4090 review</span>
            <ArrowRightIcon size={16} />
          </Link>
        </div>}
      {activeTab === 'display' && <div>
          <div className="mb-8">
            <h3 className="text-lg font-medium mb-4">
              Color Accuracy (Lower ΔE is better)
            </h3>
            <div className="space-y-4">
              {[{
            name: 'Apple Studio Display',
            score: 0.8,
            color: '#06d6a0'
          }, {
            name: 'ASUS ProArt PA32UCG',
            score: 1.1,
            color: '#06d6a0'
          }, {
            name: 'LG C2 OLED',
            score: 1.7,
            color: '#4361ee'
          }, {
            name: 'Samsung Odyssey G9',
            score: 2.4,
            color: '#8a8f98'
          }].map(item => <div key={item.name} className="space-y-1">
                  <div className="flex justify-between text-sm">
                    <span>{item.name}</span>
                    <span className="font-medium">{item.score} ΔE</span>
                  </div>
                  <div className="w-full bg-[#151518] rounded-full h-2">
                    <div className="h-2 rounded-full" style={{
                width: `${100 - item.score / 3 * 100}%`,
                backgroundColor: item.color
              }}></div>
                  </div>
                </div>)}
            </div>
          </div>
          <Link to="/review/apple-studio-display" className="flex items-center text-[#4361ee] hover:text-[#06d6a0] transition-colors">
            <span className="mr-2 text-sm">
              View full Studio Display review
            </span>
            <ArrowRightIcon size={16} />
          </Link>
        </div>}
    </div>;
};
export default LabData;